<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useRealtimeDiskIOConnection } from '@/utils/RealtimeDiskIO'

const { diskIOStats, error, isConnected, connect, disconnect } = useRealtimeDiskIOConnection()

onMounted(() => {
  console.log('RealtimeDiskIO组件已挂载')
  connect()
})

onUnmounted(() => {
  console.log('RealtimeDiskIO组件卸载，关闭连接')
  disconnect()
})
</script>

<template>
  <div class="disk-io-stats-container">
    <div class="disk-io-stats-header">
      磁盘IO实时监控
      <span class="connection-status" :class="{ connected: isConnected }">
        {{ isConnected ? '● 已连接' : '○ 连接中' }}
      </span>
    </div>

    <div v-if="error" class="error">
      <p>{{ error }}</p>
      <small>请检查后端服务是否正常运行</small>
    </div>

    <div v-if="diskIOStats.length > 0" class="disk-io-stats-grid">
      <div v-for="diskIO in diskIOStats" :key="diskIO.name" class="disk-io-stats-card">
        <div class="disk-io-stats-header">{{ diskIO.name }}</div>
        <div class="disk-io-stats-item">
          <span class="disk-io-stats-label">实时读取:</span>
          <span class="disk-io-stats-value">{{ diskIO.read_speed }}</span>
        </div>
        <div class="disk-io-stats-item">
          <span class="disk-io-stats-label">实时写入:</span>
          <span class="disk-io-stats-value">{{ diskIO.write_speed }}</span>
        </div>
        <div class="disk-io-stats-item">
          <span class="disk-io-stats-label">读取次数:</span>
          <span class="disk-io-stats-value">{{ diskIO.read_count.toLocaleString() }}</span>
        </div>
        <div class="disk-io-stats-item">
          <span class="disk-io-stats-label">写入次数:</span>
          <span class="disk-io-stats-value">{{ diskIO.write_count.toLocaleString() }}</span>
        </div>
      </div>
    </div>

    <div v-else class="loading">
      <div class="loading-spinner"></div>
      <p>{{ isConnected ? '正在接收实时数据...' : '正在连接实时数据...' }}</p>
      <small>{{ isConnected ? '数据正在实时更新中...' : '正在连接后端服务...' }}</small>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/disk-io-stats.scss' as *;
</style>
